<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>:text</title>
        <link type="text/css" rel="stylesheet" href='../../css/c1.css'>
        <style>
            *{
                margin: 0 auto;
                padding:0 2px;
            }
            p{
                padding: 5px 10px;
            }
        </style>
        <script src="../../work/jquery-1.12.4.min.js"></script>
        <script>
            jQuery(function ($) {
                $("#btn1",".code").click(function () {
                    $(":text").css({backgroundColor:'red'});
                });

            });
        </script>
    </head>
    <body>
    <div class="title">:text</div>
    <p>匹配所有的单行文本框。</p>
    <div class="title">代码示例</div>
    <div class="code">
                        <pre>
                            &lt;script&gt;
                                jQuery(function ($) {
                                    $("#btn1",).click(function () {
                                        $(<span>":text"</span>).css({backgroundColor:'red'});
                                        //<span>查找所有文本框</span>
                                    });
                                });
                           &lt;/script&gt;
        &lt;form&gt;
            &lt;input type="text" value="文本框"/&gt;&lt;br/&gt;
            &lt;input type="checkbox" /&gt;复选框&lt;br/&gt;
            &lt;input type="radio" /&gt;单选按钮&lt;br/&gt;
            &lt;input type="image" /&gt;图像域&lt;br/&gt;
            &lt;input type="file" /&gt;文件域&lt;br/&gt;
            &lt;input type="submit" /&gt;&lt;br/&gt;
            &lt;input type="reset" /&gt;&lt;br/&gt;
            &lt;input type="password" value=""/&gt;密码框&lt;br/&gt;
            &lt;input type="button" value="button"/&gt;&lt;br/&gt;
            &lt;select&gt;&lt;option /&gt;下拉选择框&lt;/select&gt;&lt;br/&gt;
            &lt;textarea&gt;多行文本框&lt;/textarea&gt;&lt;br/&gt;
            &lt;button&gt;按钮&lt;/button&gt;
        &lt;/form&gt;
                          &lt;button id="btn1" style="margin: 10px;"&gt;点击查看效果&lt;/button&gt;
                        </pre>
    </div>
    <div class="title">代码示例</div>
    <div class="code">
        <form>
            <input type="text" value="文本框"/><br/>
            <input type="checkbox" />复选框<br/>
            <input type="radio" />单选按钮<br/>
            <input type="image" />图像域<br/>
            <input type="file" />文件域<br/>
            <input type="submit" /><br/>
            <input type="reset" /><br/>
            <input type="password" value=""/>密码框<br/>
            <input type="button" value="button"/><br/>
            <select><option />下拉选择框</select><br/>
            <textarea>多行文本框</textarea><br/>
            <button>按钮</button>
        </form>
        <button id="btn1" style="margin: 10px;width: 120px;height:50px">点击查看效果</button>
    </div>
    </body>
</html>